<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/userLib/css/shop.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/need/laydate.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/skins/default/laydate.css" rel="stylesheet">
		<style>
			.n-default .n-left,
			.n-default .n-right {
				margin-top: 32px!important;
			}
			*{
				font-size: 13px;
			}
			
			.ZZHT-order-list .order-heads td {
			    padding: 15px 18px;
			    border-bottom: 1px solid #fec5b1;
		    }
		    .status {
			    border-left: 3px solid #666;
			    line-height: 15px;
			    padding-left: 10px;
			}
			.ZZHT-order-list .orderno {
			    float: left;
			    margin-right: 30px;
			    width: 206px;
			    text-align: left;
			}
			.prices {
			    color: #ed5d2a;
			    font-weight: 600;
			}
		    .ZZHT-contact div{
		    	font-size: 13px;
		    	text-align: center;
		    }
		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">商城商家</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="onLine_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix"><span class="left fl">已收货订单</span><span class="right fr">当前位置：订单管理--待付款订单</span>
					</div>
					<div class="search-wrap">
						<form class="search-form" name="form">
							<label>
            订单编号：<input class="u-query" id="orderNo" name="orderNo" type="text">
        </label>
							<label>
            &nbsp;&nbsp;时间：<input class="laydate-icon u-query" type="text" name="beginTime" id="beginTime" placeholder="开始时间">
            - <input class="laydate-icon u-query" type="text" name="endTime" id="endTime" placeholder="结束时间">
        </label>
							<a href="javascript:;" class="btn-inquire" onclick="orderListByPage()"><i class="icon-search"></i></a>
						</form>
					</div>
					<div class="ZZHT-shop-content">
						<table class="ZZHT-order-list">
							<thead>
								<tr class="head">
									<th>订单详情</th>
									<th>支付方式</th>
									<th>配送信息</th>
									<th>金额</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="loadingBdy">
								<tr id="loading" class="empty-row" style="display: none;">
									<td colspan="5"><img src="../plugin/userLib/img/loading.gif">正在加载数据...</td>
								</tr>
							</tbody>
							<tbody class="j-order-row empty_tab">
								<tr>
									<td colspan="5" align="center" style="padding:5px 0px 5px 0px">暂无数据</td>
								</tr>
								<tr>
									<td colspan="5" id="pager" align="center"></td>
								</tr>
							</tbody>
							<tbody class="j-order-row" v-for="(v,i) in tab">
								<tr class='order-head order-heads'>
									<td colspan='5' align='right'>
										<div class="status">
											<div class='time'>{{v.createTime}}</div>
											<div class='orderno'>订单号：<span>{{v.orderNo}}</span></div>
											<div style="color:#ed5d2a;float: right;" >{{v.orderStatus}}</div>
										</div>
									</td>
								</tr>
								<tr class='goods-box'>
									<td >
										<div class='goods-img'>
											<a href="" target='_blank'>
												<img v-if="v.goodsImg.substr(0,4)=='http'" :src="v.goodsImg" :title="v.goodsName" class="gImg">
												<img v-else :src="imgUrl+v.goodsImg" :title="v.goodsName" class="gImg">
											</a>
										</div>
										<div class='goods-name'>
											<div style="color:#333;font-size:14px;text-align: left;">{{v.goodsName}}</div>
											<div style="color:#999;font-size:12px;"></div>
										</div>
										<br />
										<div class='goods-extra'><span>1</span></div>
										<div class='goods-extra'><span>x</span></div>
										<div class='goods-extra'><span>{{'￥'+v.shopPrice}}</span></div>
									</td>
									<td rowspan="" align="center">
										<div class="paytypes">{{v.payType}}</div>
									</td>
									<td rowspan="" style="text-align: center;">
										<div class="delivermsg">{{v.expressId}}</div>
										<div class="delivermsg">{{v.expressNo}}</div>
										<div class="delivermsg">{{v.deliveryTime}}</div>
									</td>
									<td rowspan="" style="text-align: center;">
										<div class="shopmoney">商品金额：<span class="prices">{{'￥'+v.shopPrice}}</span></div>
										<div class="shopmoney">运费：<span class="prices">{{'￥'+v.deliverMoney}}</span></div>
										<div class="shopmoney">实付金额：<span class="prices">{{'￥'+v.realMoney}}</span></div>
									</td>
									<td rowspan="" style="border-right:0px;width:55px;">
										<!--<div style="text-align:center;color:#666;">{{v.isAppraise}}</div>
										<div>
											<a target='blank' href=''>打印订单</a>
										</div>-->
										<div>
											<a :href='"orderDetail.html?orderId="+v.orderid'>订单详情</a>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="pager" style="text-align: center;"></div>
				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../plugin/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../plugin/layer/laydate/laydate.js"></script>
		<script src="../js/common.js"></script>
		<!--<script src="../plugin/userLib/js/log.js"></script>-->
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script>
			var search_data = {};
			var pages = 1;
			var pageNum = 1;
			var shopId = '';
			
			$(function(){
				getList();
				initPage();
			})
			
			initDate();
			
			$('.empty_tab').hide();
			
			var vm = new Vue({
				el: '.ZZHT-order-list',
				data: {
					tab: [],
				}
			});
			
			function getList() {
				$('#loading').show();
				var data = $.extend(true,{},search_data);
				
				data.pageNum = pageNum;
			
				$.ajax({
					type: "get",
					url: SURL + "sktShops/findByUserId",
					async: false,
					data: {
						"userId": localStorage.userId,
					},
					success: function(res) {
						console.log(res);
						shopId = res.entity[0].shopId;
						data.shopId = shopId;
						$.ajax({ //获取记录列表
							type: "get",
							url: SURL + "/sktShops/findYiOrders",
							data: data,
							async:false,
							timeout: 5000,
							dataType: 'json',
							success: function(res) {
								$('#loading').hide();
								console.log(res);
								pages = res.page;
								if(res.messageCode == 200) {
									if(res.entity.length > 0) {
										$('.empty_tab').hide();
									} else {
										$('.empty_tab').show();
									}
									vm.tab = res.entity;
									vm.$nextTick(function(){
										imgError();
									})
								} else {
									layer.msg(res.message);
								}
							},
							error: function(textStatus) {
								console.error(textStatus);
							},
							complete: function(XMLHttpRequest, status) {
								if(status == 'timeout') {
									layer.msg("网络超时，请刷新", function() {
										location.reload();
									})
								}
							}
						});
	
					}
				});
			}	
		</script>
	</body>

</html>